<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>实例</title>
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
		<link href="../layui/css/layui.css" rel="stylesheet">
		<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
		<script src="../layui/layui.js"></script>
		<style>
			.button-link {
				text-decoration: none;
				/* 去掉下划线 */
				color: black;
				/* 初始颜色 */
				transition: color 0.3s ease;
				/* 添加过渡效果 */
			}

			.button-link:active {
				color: #00A1D6;
				/* 点击时的颜色 */
			}

			.move-down {
				padding-top: 20px;
				/* 调整这个值来控制移动的距离 */
			}

			.large-text {
				font-size: 16px;
			}

			/* 修改标签页标题栏的背景颜色 */
			.layui-tab-title {
				background-color: #555769;
				/* 设置为浅灰色 */
			}

			/* 视频圆角 */
			.rounded {
				width: 200px;
				height: 100px;
				background - color: #3498db;
				border - radius: 10px;
			}


			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
			}

			h1 {
				font-size: 19px;
				color: #333;
				margin-bottom: 10px;
			}

			.info {
				font-size: 16px;
				color: #666;
			}

			.subtitle {
				font-size: 14px;
				color: #888;
			}

			.links {
				display: flex;
				gap: 20px;
			}

			.links a {
				text-decoration: none;
				color: #007bff;
				font-size: 14px;
			}

			.links a:hover {
				text-decoration: underline;
			}

			.videoTime {
				font-size: 13px;
				position: absolute;
				left: 161.5px;
				top: 75px;
				color: white;
				padding: 5px 6px;
				border-radius: 6px 0px 0px 0px;
				background-color: rgba(255, 255, 255, 0.5);
			}
		</style>
	</head>
	<body>
		<div class="large-text" style="margin-left: 17px; color: #161823; " id="app">
			<a class="large-text" style="margin-left: 17px;  color: #CCCCCF; " href="#"
				class="button-link">全部稿件:{{allVideoNum}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a class="large-text" href="#" class="button-link"
				style=" color: #CCCCCF;">草稿</a>

			<select id="classifyChoose" style="width: 100px; height: 30px; margin-left: 621px; color: #CCCCCF;" @change="changeList()">
				<option value="0">全部分区</option>
				<option :value="type.id" v-for="type in typeList" style=" color: #CCCCCF;">{{type.classify}}({{type.classifyNum}})</option>
			</select>
			<select id="sortChoose" style="width: 160px; height: 30px; margin-left: 24px; color: #CCCCCF;" @change="sort()">
				<option value="releaseTime">投稿时间排序</option>
				<option value="viewCounts" style=" color: #CCCCCF;" >播放数排序</option>
				<option value="likeNum" style=" color: #CCCCCF;" >点赞数排序</option>
				<option value="commentNum" style=" color: #CCCCCF;" >评论数排序</option>
				<option value="forwardNum" style=" color: #CCCCCF;" >转发数排序</option>
			</select>

			<br />
			<div class="move-down">
				<a @click="auditStatus($event)" style=" color: #CCCCCF; margin-left: 20px;" href="#"
					class="button-link">进行中:{{stayReleaseNum}}</a>
				<a @click="auditStatus($event)" style=" color: #CCCCCF; margin-left: 20px;" href="#"
					class="button-link">已通过:{{passReleaseNum}}</a>
				<a @click="auditStatus($event)" style=" color: #CCCCCF; margin-left: 20px;" href="#"
					class="button-link">没通过:{{notPassReleaseNum}}</a>
			</div>
			<div id="sss" name="vedioBox" style="margin-top: 45px;position: relative;" v-for="video in videoList">
				<!-- <video width="320" height="180" style="width: 180px; height: 100px;  margin-left: 20px;">
					<source class="rounded" :src="video.worksCover" type="">
				</video> -->
				<div class="imgVideo">
					<img width="320" height="180" style="width: 180px; height: 100px;  margin-left: 20px;" :src="video.worksCover"/>
				</div>
				<!-- <span class="videoTime">{{video.releaseTime}}</span> -->
				<div class="containe" style="margin-top: -115px; margin-left: 220px;">
					<h1>{{video.title}}</h1>
					<P class="info">{{video.VideoTime}}</P>
					<div style="  margin-left: 605px;" type="button">
						<button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-edit"></i>
							编辑</button>
						<button style="margin-top: -55;  margin-left: 3px;" class="layui-btn layui-btn-primary"><i
								class="layui-icon layui-icon-more-vertical"></i></button>
					</div>
				</div>
				<div data-v-548917d5 title="播放" class="view-stat" style=" margin-left: 219px;margin-top: -18px;">
					<!--播放-->
					<img data-v-548917d5 width="16px" height="16px" src="https://s1.hdslb.com/bfs/templar/york-static/qAnTDC0DSpuds9Rv.png" alt="" />
					<span data-v-548917d5 class="icon-text">{{video.viewCounts}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
					<!--点赞-->
					<img data-v-548917d5 width="16px" src="https://s1.hdslb.com/bfs/templar/york-static/wOdLWtIVZ2XE9vNZ.png" alt="" />
					<span data-v-548917d5 class="icon-text">{{video.likeNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
					<!--评论-->
					<img data-v-548917d5 width="16px" src="https://s1.hdslb.com/bfs/templar/york-static/IuXtxcG3v5O8to0K.png" alt="" />
					<span data-v-548917d5 class="icon-text">{{video.commentNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
					<!--转发-->
					<img data-v-548917d5 width="16px" src="https://s1.hdslb.com/bfs/templar/york-static/929bYp7TSIAecSPG.png" alt="" />
					<span data-v-548917d5 class="icon-text">{{video.forwardNum}}</span>
				</div>
			</div>

		</div>
	</body>
	<script src="../js/messageManagement.js"></script>
</html>